<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改优惠券' : '添加优惠券'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="商户名称:" prop="merchant_name">
        <el-input
          clearable
          v-model="form.merchant_name"
          placeholder="商户名称"
        />
      </el-form-item>
      <el-form-item label="商户简称:" prop="merchant_abbreviation">
        <el-input
          clearable
          v-model="form.merchant_abbreviation"
          placeholder="商户简称"
        />
      </el-form-item>


      <el-form-item label="店铺手机号:" prop="store_telphone">
        <el-input
          clearable
          v-model="form.store_telphone"
          placeholder="店铺手机号"
        />
      </el-form-item>

       <el-form-item label="邮箱:" prop="email">
        <el-input
          clearable
          v-model="form.email"
          placeholder="邮箱"
        />
      </el-form-item>

        <el-form-item label="银行卡照片:" prop="bank_photo">
        <el-input
          clearable
          v-model="form.bank_photo"
          placeholder="银行卡照片"
        />
      </el-form-item>



      
        <el-form-item label="银行卡卡号:" prop="bank_number">
        <el-input
          clearable
          v-model="form.bank_number"
          placeholder="银行卡卡号"
        />
      </el-form-item>


           <el-form-item label="银行卡地址:" prop="bank_address">
        <el-input
          clearable
          v-model="form.bank_address"
          placeholder="银行卡地址"
        />
      </el-form-item>


   <el-form-item label="银行卡地址:" prop="bank_address">
        <el-input
          clearable
          v-model="form.bank_address"
          placeholder="银行卡地址"
        />
      </el-form-item>

      
   <el-form-item label="开户行:" prop="store_photo">
        <el-input
          clearable
          v-model="form.store_photo"
          placeholder="开户行"
        />
      </el-form-item>

      

       <el-form-item label="经营大类:" prop="operate_category">
        <el-input
          clearable
          v-model="form.operate_category"
          placeholder="经营大类"
        />
      </el-form-item>

      
       <el-form-item label="经营小类:" prop="operate_category_son">
        <el-input
          clearable
          v-model="form.operate_category_son"
          placeholder="经营小类"
        />
      </el-form-item>

      <el-form-item label="经营地址:" prop="operate_address">
        <el-input
          clearable
          v-model="form.operate_address"
          placeholder="经营地址"
        />
      </el-form-item>


       <el-form-item label="经营地址详情:" prop="operate_address_info">
        <el-input
          clearable
          v-model="form.operate_address_info"
          placeholder="经营地址详情"
        />
      </el-form-item>


      <el-form-item label="身份证正面:" prop="id_card_front">
        <span slot="label">
          身份证正面

          <el-tooltip placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <el-avatar
         
          :src="form.id_card_front"
          shape="square"
          :size="150"
        />
      </el-form-item>


        <el-form-item label="身份证反面:" prop="id_card_reverse">
        <span slot="label">
          身份证反面

          <el-tooltip placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <el-avatar
      
          :src="form.id_card_reverse"
          shape="square"
          :size="150"
        />
      </el-form-item>




      <el-form-item label="门头照:" prop="storefront_photo">
        <span slot="label">
          门头照

          <el-tooltip placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <el-avatar
          v-if="form.storefront_photo"
          :src="form.storefront_photo"
          shape="square"
          :size="150"
        />
      </el-form-item>


       <el-form-item label="店铺照片:" prop="store_photo">
        <span slot="label">
          店铺照片

          <el-tooltip placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <el-avatar
          v-if="form.store_photo"
          :src="form.store_photo"
          shape="square"
          :size="150"
        />
      </el-form-item>


      
       <el-form-item label="收银台照片:" prop="cashier_photo">
        <span slot="label">
          收银台照片

          <el-tooltip placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
        <el-avatar
          v-if="form.cashier_photo"
          :src="form.cashier_photo"
          shape="square"
          :size="150"
        />
      </el-form-item>

    <el-form-item label="进件手续费:" prop="application_rate">
        <el-input
          clearable
          v-model="form.application_rate"
          placeholder="支持0-100%"
        />
      </el-form-item>

    <el-form-item label="进件状态:" prop="is_application">
        <el-radio-group v-model="form.is_application">
      
          <el-radio :label="2" value="2">审核通过</el-radio>
             <el-radio :label="3" value="3">驳回</el-radio>
        </el-radio-group>
      </el-form-item>

   <el-form-item label="驳回原因:" prop="reason"  v-if="form.is_application == 3">
      <el-input clearable v-model="form.reason" placeholder="驳回原因" />
    </el-form-item>
    

    

       <el-form-item label="商户号:" prop="mch_no">
        <el-input
          clearable
          v-model="form.mch_no"
          placeholder="商户号"
        />
      </el-form-item>


         <el-form-item label="应用id:" prop="app_id">
        <el-input
          clearable
          v-model="form.app_id"
          placeholder="应用id"
        />
      </el-form-item>



        <el-form-item label="应用私钥:" prop="private_key">
        <el-input
          clearable
          v-model="form.private_key"
          placeholder="应用私钥"
        />
      </el-form-item>
      

    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { add, update } from '@/api/storedata';
const DEFAULT_FORM = {
  id: 0,
  merchant_name: '',
  merchant_abbreviation: '',
  id_card_front: '',
  id_card_reverse: '',
  store_telphone: '',
  email: '',
  bank_photo: '',
  bank_number: '',
  bank_address: '',
  operate_category: '',
  operate_category_son: '',
  mch_no: '',
  app_id: '',
  private_key: '',
  is_application: '',
  operate_address: '',
  operate_address_info: '',
  storefront_photo: '',
  store_photo: '',
  cashier_photo: '',
  bank_deposit: '',
  application_rate: '',
  reason:'',

};

export default {
  name: 'OpenEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: { ...DEFAULT_FORM },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入平台标题',
            trigger: 'blur'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  methods: {
    /* 保存编辑 */
    modalPicTap(tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      switch (this.picTit) {
        case 'pic_url':
          this.form.pic_url = pc.satt_dir;
          break;
        case 'background':
          this.form.background = pc.satt_dir;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove(field) {
      this.form[field] = '';
    },

    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.loading = true;
        const data = {
          ...this.form
        };

        const saveOrUpdata = this.isUpdate ? update : add;

        saveOrUpdata(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },
  watch: {
    visible(visible) {
      if (visible) {
        if (this.data) {
          this.$util.assignObject(this.form, {
            ...this.data
          });
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
